<template>
	<!-- 购买成功 -->
	<view class="purchase-succeeds">
		<view class="purchase-detail">
			<view>
				<image :src="purchase_succeeds" style="width: 548upx;height: 44upx;"></image>
			</view>
			<view class="goods-detail">
				<view class="privilege-content-left">
					<view>
						<image :src="info.img_src" style="width: 100%;height: 100%;"></image>
					</view>
					<view>
						{{info.grade}}
					</view>
				</view>
				<view class="privilege-content-right">
					<view>{{info.title|privi_val}}</view>
					<view class="privilege-money-participation" style="display: flex;">
						<view style="position: absolute;top: 6upx;left: 0;" v-if="info.achievement_value>0">
							<image :src="crown" style="width: 32upx;height: 32upx;"></image>
						</view>
						<view :class="info.achievement_value>0?'money_detail':''">
							<text style="color: #FF3C00;font-size: 32upx;vertical-align: text-bottom;margin-right: 10upx;"><text v-if="info.achievement_value>0">{{info.achievement_value}}+</text>￥{{info.price}}</text>
							<text style="color: #cccccc;font-size: 24upx;text-decoration: line-through;line-height: 34upx;vertical-align: text-bottom;">￥{{info.original_price}}</text>
						</view>
					</view>
					<view style="display: flex;margin-top: 28upx;">
						<view v-if="info.share_money>0">
							分享赚￥{{info.share_money}}
						</view>
						<view style="margin-left: 10upx;" v-if="info.share_achievement_value>0">
							成就值+{{info.share_achievement_value}}
						</view>
					</view>
				</view>
			</view>
			<view class="service-share">
				<!-- #ifdef MP-WEIXIN -->
				<view @click="toService">
					联系客服
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view @click="preImg('/static/server_code.jpg')">
					联系客服
				</view>
				<!-- #endif -->
				<view @click="toSharePoster">
					分享给好友
				</view>
			</view>
		</view>
		<!-- 购买成功需要兑换 -->
		<view class="purchase-exchange" v-if="info.course_redemption.length>0">
			<view style="display: flex;padding: 24upx 0;box-sizing: border-box;">
				<view style="width: 6upx;height: 32upx;background: #00A66A;border-radius: 3upx;margin-top: 4upx;"></view>
				<view style="margin-left: 14upx;color: #333333;font-size: 30upx;">
					课程兑换
				</view>
			</view>
			<view>
				兑换说明：{{info.redemption_instruction}}
			</view>
			<view v-for="(item,index) in info.course_redemption" :key="index" style="margin-bottom:40upx;">
				<view class="redeem-code">
					<view v-if="dataid">
						兑换码：<text style="color: #00A66A;">{{item.redemption_code}}</text>
					</view>
				</view>
				<view class="exchange-links">
					<text>兑换链接:</text>
					<text>{{item.redeem_connection}}</text>
				</view>
				<view @click="copyLink(item)" class="copyBtn">
					复制链接和兑换码
				</view>
			</view>
		</view>
		<view class="detail-explain">
			<view style="display: flex;">
				<view style="width: 6upx;height: 32upx;background: #00A66A;border-radius: 3upx;margin-top: 6upx;"></view>
				<view style="margin-left: 14upx">
					详细说明
				</view>
			</view>
			<view class="rich_text_module">
				<u-parse :content="info.detail"></u-parse>
			</view>
		</view>
		<view class="more-privilege">
			<view style="font-weight:550;" @click="comePrivi">
				更多特权
			</view>
			<!-- <view class="privilege-contain"> -->
			<scroll-view  class="privilege-contain mydlsq" scroll-y="true" :style="'height:'+800+'upx'" @scrolltolower="loadingMore" id='mjltest'>
				<view class="privilege-content" @click="comePrivilageDetail(one.id)" v-for="one in PriviList" :key="one.id">
					<view class="privilege-content-left-detail">
						<view>
							<image :src="one.img_src" style="width: 100%;height: 100%;"></image>
						</view>
						<view style="color: #FFFFFF;">
							{{one.grade}}
						</view>
					</view>
					<view class="privilege-content-right-detail" v-if="!isIos">
						<view class="act_name">{{one.title|privi_val}}</view>
                        <view class="act_bottom">
                        	<view class="money_icon" v-if="one.achievement_value>0"></view>
                        	<text class="money_num" v-if="one.achievement_value>0">{{one.achievement_value}}+</text><text class="money_num">￥{{one.price}}</text>
                        	<text class="old_money">￥{{one.original_price}}</text>
                        </view>
                        <view>
                        	<view style="color: #999;font-size: 25upx;margin-left: 10px;">
                        		<button v-if="one.price>0"  class="act_button_text"  @click="details(one.id)">立即参与</button>
                                <button v-else  class="act_button_text"  @click="details(one.id)">免费领取</button>
                        	</view>
                        </view>
                        <view class="act_tags">
                        	<view class="act_tag" v-if="one.share_money>0">
                        		分享赚￥{{one.share_money}}
                        	</view>
                        	<view class="act_tag" style="margin-left: 10upx;" v-if="one.share_achievement_value>0">
                        		成就值+{{one.share_achievement_value}}
                        	</view>
                        </view>
					</view>
                    <view class="privilege-content-right-detail" v-if="isIos">
                    	<view class="act_name">{{one.title|privi_val}}</view>
                        
                        <view>
                        	<view style="color: #999;font-size: 25upx;margin-left: 10px;">
                        		<button v-if="one.price>0"  class="act_button_text"  @click="details(one.id)">立即参与</button>
                                <button v-else @click="details(one.id)" class="act_button_text" >免费领取</button>
                        	</view>
                        </view>
                        <view class="act_tags">
                        	<view class="act_tag" style="margin-left: 10upx;" v-if="one.share_achievement_value>0">
                        		成就值+{{one.share_achievement_value}}
                        	</view>
                        </view>
                    </view>
				</view>
			</scroll-view>
			<!-- </view> -->
		</view>
		<ending></ending>
	</view>
</template>

<script>
	import uParse from '@/components/un-parse/u-parse.vue'
	import ending from '../../../common/ending.vue'
    import api from '../../../utils/api.js'
		import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy.js';
	export default{
		components:{ending,uParse,},
		data() {
			return {
                isIos:this.$isIos,
                dataid:'',
				PriviList: [],
				purchase_succeeds: this.$imgUrl+'img/privilege/purchase_succeeds.png',
				png1: this.$imgUrl+'img/1.png',
				crown: this.$imgUrl+'img/crown.png',
				video1: this.$imgUrl+'img/video/1.mp4',
				// 活动id
				id: 0,
				// 订单id
				order_id: 0,
				info: {
					achievement_value: 0,
					course_redemption: [],
					detail: '',
					grade: '',
					img_src: '',
					original_price: 0,
					price: 0,
					share_achievement_value: 0,
					share_money: 0,
					title: '',
					redemption_instruction: ''
				},
				pagesize: 3,
				page: 1,
				height: 0,
				isdaodi: false, // false为未到底，true已到底
				last_pagesss: 1,
				first_height: 0,
			}
		},
		filters: {
			privi_val(value) {
				if (!value) return ''
				if (value.length > 28) {
					return value.slice(0, 28) + '...'
				}
				return value
			}
		},
		onLoad(options) {
			if(options.token!=undefined) {
				this.token = options.token
			}
			if(options.id!=undefined) {
				this.id = options.id
			}else if( options.order_id!=undefined) {
				this.order_id = options.order_id
			}
			this.getData()
			this.getPrivilegeActList()
            this.getVerificationcode()
		},
		onReachBottom() {
			console.log('触发上拉时间')
			this.loadingMore()
		},
		methods: {
            //获取验证码
            getVerificationcode(){
                this.$api.getVerificationcode({}).then(res=>{
                    if(res.status){
                        res.data.data.forEach(item => {
                            if(this.id == item.id){
                                this.dataid = item.is_redeem_code
                                this.dataid = true
                            }
                        })
                        console.log('is_redeem_code',this.dataid)
                    }
                }).catch(err=>{
                    console.log('获取失败')
                })
            },
			loadingMore() {
				console.log('loadingMore=========')
				let that = this
				this.page = this.page+1
				if(this.page>this.last_page) {
					uni.showToast({
						title: '没有更多了',
						icon: 'none',
						duration: 2000
					})
					// return false
				}else {
					let data = {
						token: this.token,
						page: this.page,
						pagesize: this.pagesize
					}
					this.$api.getPrivilegedList(data).then(res => {
						if (res.status) {
							console.log('loadingMore dddddd获取特权活动数据列表', this.PriviList)
							this.PriviList = this.PriviList.concat(res.data.data)
							if (res.data.current_page == res.data.last_page) {
								this.isdaodi = true
							}
							// console.log('ddddddddddd', this.height)
							// if (res.data.data.length < this.pagesize) {
							// 	var pp = this.pagesize - res.data.data.length;
							// 	this.height = this.height - (278 * pp);
							// }
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					}).catch(err => {
						console.log('获取特权活动数据列表', err)
					})
				}
			},
			// 获取订单信息
			getData() {
				let data
				if(this.id!=0) {
					data = {
						token: this.token,
						id: this.id
					}
					this.$api.getOrderInfoByActId(data).then(res => {
						if(res.status) {
							this.info = res.data
						}else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
							setTimeout(()=>{
								uni.navigateBack({
								})
							},500)
						}
						console.log('根据活动id获取订单信息',res)
					}).catch(err => {
						console.log('根据活动id获取订单信息',err)
					})
				}else if(this.order_id!=0) {
					data = {
						token: this.token,
						order_id: this.order_id
					}
					this.$api.getOrderInfoByOrderId(data).then(res => {
						if(res.status) {
							this.info = res.data
						}else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
							setTimeout(()=>{
								uni.navigateBack({
								})
							},500)
						}
						console.log('根据订单id获取订单信息',res)
					}).catch(err => {
						console.log('根据订单id获取订单信息',err)
					})
				}
			},
			// 获取特权活动数据列表
			getPrivilegeActList(){
				let data = {
					page:1,
					pagesize: 3
				}
				this.$api.getPrivilegedList(data).then(res => {
					console.log('获取特权活动数据列表',res)
					if(res.status){
						this.PriviList = res.data.data
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(err => {
					console.log('获取特权活动数据列表',err)
				})
			},
			toSharePoster(){
				uni.navigateTo({
					url:'../sharePoster/sharePoster?id='+this.id
				})
			},
			// 跳转到特权详情页
			comePrivilageDetail(id){
				uni.navigateTo({
					url:'../welfareDetails/welfareDetails?id='+id
				})
			},
			toService() {
				uni.navigateTo({
					url: '../../service/service'
				})
			},
			copyLink(item) {
				//#ifdef MP-WEIXIN
				let self = this
				let data = '兑换链接：'+item.redeem_connection+',兑换码：'+item.redemption_code
				uni.setClipboardData({
					data: data,
					success: function() {
						console.log('success')
					},
					fail: function() {
						uni.showToast({
							title: '复制失败，请稍后重试！',
							icon: 'none',
							duration: 2000
						})
					}
				});
				//#endif
				//#ifdef H5
				let that = this; // 复制内容，必须字符串，数字需要转换为字符串
				let dataH5 = '兑换链接：'+item.redeem_connection+',兑换码：'+item.redemption_code
				const result = h5Copy(dataH5);
				if (result === false) {
					uni.showToast({
						title: '不支持'
					});
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
				//#endif
			},
			details(id) {
				uni.navigateTo({
					url: '../welfareDetails/welfareDetails?id=' + id    
				})
			}
		}
	}
</script>

<style>
	.money_detail{
		padding-left: 36upx;
		box-sizing: border-box;
	}
	.rich_text_module{
		background: #fff;
	}
	page{
		position: relative;
		left: 0;top: 0;right:0 ;bottom: 0;
	}
	.purchase-succeeds{
		width: 100%;
		height: 100%;
		background: #F5F6F9;
	}
	.purchase-detail{
		width: 100%;
		height: 574upx;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.purchase-detail>view:first-child{
		width: 100%;
		padding-top: 40upx;
		padding-bottom: 24upx;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		text-align: center;
	}
	.goods-detail{
		width: 100%;
		height: 288upx;
		border-bottom: 1upx solid #DEDEDE;
		padding-top: 28upx;
		padding-bottom: 30upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.privilege-content-left{
		width: 240upx;
		height: 100%;
		position: relative;
	}
	.privilege-content-right .privilege-money-participation{
		margin-top: 26upx;
		position: relative;
	}
	.privilege-content-left>view:first-child{
		width: 100%;
		height: 230upx;
	}
	.privilege-content-left>view:last-child{
		font-family: PingFangSC-Medium;
		width: 100%;
		height: 50upx;
		font-size: 24upx;
		color: #fff;
		text-align: center;
		line-height: 50upx;
		opacity: 0.7;
		background-color: rgba(0, 0, 0, 1);
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.privilege-content-right{
		width: 430upx;
		height: 100%;
	}
	.privilege-content-right>view:first-child{
		font-size: 30upx;
		height: 84upx;
		color: #333;
		font-weight: 800;
	}
	.privilege-content-right>view:last-child>view{
		width: 196upx;
		height: 46upx;
		border: 1px solid #FF3C00;
		text-align: center;
		line-height: 46upx;
		color: #FF3C00;
		font-size: 24upx;
		border-radius: 23upx;
	}
	/* 特权活动 */
	.more-privilege{
		width: 100%;
		/* height: 944upx; */
		background: #fff;
		margin-top: 20upx;
		padding: 26upx 30upx 4upx 30upx;
		box-sizing: border-box;
	}
	.more-privilege .privilege-contain{
		margin-top: 24upx;
	}
	.more-privilege .privilege-contain .privilege-content{
		width: 100%;
		height: 258upx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
		padding-bottom: 28upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		margin-top: 32upx;
	}
	.more-privilege .privilege-contain .privilege-content:last-child{
		border-bottom: none;
	}
	.privilege-content-left-detail{
		width: 240upx;
		height: 230upx;
		position: relative;
	}
	.privilege-content-left-detail>view:first-child{
		width: 100%;
		height: 100%;
	}
	.privilege-content-left-detail>view:last-child{
		font-family: PingFangSC-Medium;
		width: 100%;
		height: 50upx;
		font-size: 24upx;
		text-align: center;
		line-height: 50upx;
		background:linear-gradient(to right,#00A66A,#CBEC00) ;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.privilege-content-right-detail{
		width: 430upx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.act_name {
		color: #333;
		font-size: 30upx;
		height: 84upx;
	}
	.act_tags {
		color: #FF3C00;
		text-align:center;
		vertical-align:middle;
		font-size: 29upx;
		display: flex;
        margin-top: 10upx;
	}
	.act_tag {
		line-height: 46upx;
		font-size: 26upx;
        padding: 0 20upx;
		height:46upx;
		border-radius:12px;
		border:1px solid rgba(255,60,0,1);
	}
	.act_bottom {
        position: absolute;
		display: flex;
		align-items: center;
        margin-top: 110upx;
	}
	.old_money {
		color: #cccccc;
		font-size: 24upx;
		text-decoration: line-through;
		line-height: 34upx;
		margin-left: 10upx;
		margin-top: 6upx;
	}
	.money_num {
		color: #FF3C00;
		font-size: 32upx;
	}
	.money_icon {
		width: 32upx;
		height: 32upx;
		margin-right: 4upx;
		background: url('https://lightplanet.tuanhaoke.cn/img/crown.png') no-repeat;
		background-size: 100% 100%;
	}
	.service-share{
		width: 100%;
		padding: 40upx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		font-size: 30upx;
		text-align: center;
	}
	.service-share>view:first-child{
		width: 324upx;
		height: 80upx;
		line-height: 80upx;
		color: #00A66A;
		border: 1px solid #00A66A;
		border-radius: 40upx;
	}
	.service-share>view:last-child{
		width: 324upx;
		height: 80upx;
		line-height: 80upx;
		background: linear-gradient(#B3EA00,#00A66A);
		box-shadow: 0 4upx 8upx 0 rgba(0, 166, 106, 0.35);
		border-radius: 40upx;
		color: #FFFFFF;
	}
	.detail-explain{
		width: 100%;
		background: #fff;
		margin-top: 20upx;
		padding-bottom: 40upx;
		box-sizing: border-box;
	}
	.detail-explain>view:first-child{
		padding: 24upx 0;
		padding-left: 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		color: #333;
		line-height: 42upx;
		border-bottom: 0.5px solid #DEDEDE;
	}
	.detail-explain>view:nth-child(2){
		margin-top: 22upx;
	}
	.detail-explain>view:nth-child(2)>text{
		display: inline-block;
		color: #666;
		font-size: 28upx;
		line-height: 40upx;
	}
	.detail-explain>view:nth-child(2) .gift{
		color: #FF5C46;
	}
	.detail-explain>view:last-child{
		color: #666666;
		font-size: 28upx;
	}
	.purchase-exchange{
		width: 100%;
		background: #FFFFFF;
		margin-top: 20upx;
		box-sizing: border-box;
		padding: 0 30upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: 20upx;
	}
	.purchase-exchange>view:nth-child(2){
		color: #666666;
		font-size: 28upx;
	}
	.redeem-code{
		display: flex;
		justify-content: space-between;
	}
	.redeem-code>view:first-child{
		color: #666666;
		font-size: 28upx;
		line-height: 64upx;
	}
	.exchange-links>text{
		width: 100%;
		display: block;
		font-size: 28upx;
	}
	.exchange-links>text:first-child{
		color: #666666;
	}
	.exchange-links>text:last-child{
		color: #0091FF;
		word-wrap:break-word;
	}
	.purchase-exchange .copyBtn{
		width: 430upx;
		line-height: 80upx;
		height: 80upx;
		border-radius: 40upx;
		background: linear-gradient(#CBEC00,#00A66A);
		box-shadow: 0 8upx 16upx 0rgba(85, 166, 0, 0.29);
		color: #FFFFFF;
		text-align: center;
		font-size: 30upx;
		margin: 0 auto;
		margin-top: 20upx;
	}
    .act_button_text{
        width: 180upx;
        height: 60upx;
        background:linear-gradient( to top,#00A66A,#CBEC00) ;
        border-radius: 30upx;
        line-height: 60upx;
        font-size: 30upx;
        color:rgba(255,255,255,1);
        text-align: center;
        margin-left: 233upx;
        margin-top: -14upx;
    }
</style>
